<template>
	<view class="tree-wrapper">
        <view v-for="(node, index) in data" :key="index" class="tree-node">
            <view class="tree-node-content"
                    :class="{ 'active': isSelected(node) }"
                    @click="handleNodeClick(node)">
                <span class="tree-icon" 
                        v-if="node.children && node.children.length > 0">
                    {{ node.expanded ? '▼' : '▶' }}
                </span>
                <span class="tree-icon" 
                        v-else-if="node.has_children || node.children_count > 0">
                    {{ node.expanded ? '▼' : '▶' }}
                </span>
                <span class="tree-icon" v-else>•</span>
                <span>{{ node.name }}</span>
            </view>
            <view v-if="node.children && node.children.length > 0 && node.expanded" 
                    class="tree-children">
                <tree-sidebar 
                    :data="node.children"
                    :selected-node="selectedNode"
                    @node-click="$emit('node-click', $event)"
                    @edit-click="$emit('edit-click', $event)">
                </tree-sidebar>
            </view>
        </view>
    </view>
</template>

<script>
import { mapMutations, mapState, mapActions } from 'vuex';

export default {
    name: 'TreeSidebar',
    props: {
        data: {
            type: Array,
            default: () => []
        },
        selectedNode: {
            type: Object,
            default: null
        }
    },
	data() {
		return {
            sidebarTransform: '0px',
            activeIndex: '-1',
		}
	},
    computed: {
		...mapState(['sidebarBool', 'sideList'])
	},
	methods: {
        handleNodeClick(node) {
            // 先选中节点
            this.$emit('node-click', node);
            
            // 如果节点已经有子节点数据，直接切换展开状态
            if (node.children && node.children.length > 0) {
                this.$set(node, 'expanded', !node.expanded);
            } else if (node.children && node.children.length === 0) {
                // 如果子节点为空数组，说明已经加载过但没有数据，切换展开状态
                this.$set(node, 'expanded', !node.expanded);
            } else {
                // 如果节点没有children属性，说明还没有加载过，先展开节点
                // 父组件会通过接口获取数据并更新children
                this.$set(node, 'expanded', true);
            }
        },
        editNode(node) {
            this.$emit('edit-click', node);
        },
        isSelected(node) {
            return this.selectedNode === node;
        },
        ...mapMutations([
            'handleActive', 
            'handleHideSidebar'
        ]),
        ...mapActions([
            'getTableDataAct', 
        ]),
	}
}
</script>

<style lang="less" scoped>
.tree-wrapper {
    height: 100%;
    font-size: 35rpx;
}

.tree-container {
    padding: 20px;
    font-family: Arial, sans-serif;
}
.tree-node {
    margin: 5px 0;
    cursor: pointer;
    user-select: none;
}
.tree-node-content {
    display: flex;
    align-items: center;
    padding: 8px;
    border-radius: 4px;
    transition: background-color 0.2s;
}
.tree-node-content:hover {
    background-color: #f5f5f5;
}
.tree-node-content.active {
    background-color: #e3f2fd;
    color: #1976d2;
}
.tree-icon {
    margin-right: 8px;
    font-size: 12px;
    width: 16px;
    text-align: center;
}
.tree-children {
    margin-left: 20px;
    border-left: 1px solid #e0e0e0;
    padding-left: 10px;
}
.edit-btn {
    margin-left: 10px;
    padding: 4px 8px;
    background-color: #4caf50;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
}
.edit-btn:hover {
    background-color: #45a049;
}


.sidebar_content {
    position: relative;
    display: flex;
    font-size: 40rpx;

    .bao_scroll_y {
        height: calc(100vh - 420rpx);
        height: calc(100vh - 304rpx);
        overflow: auto;
    }

    .sidebar {
        transition: all 0.3s;
    }
    .item {
        width: 220rpx;
        padding: 10rpx 15rpx;
        color: #f59a23;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
    .item1 {
        padding: 10rpx 15rpx;
        color: #f59a23;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
    .icon {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        display: inline;
        width: 80rpx;
        height: calc(100vh - 312rpx);
       
        transition: left 0.3s;
        background: #fff;

        .icon_1{
            z-index: 9;
            padding: 40rpx 10rpx;
            // background: #ddd;
            background: linear-gradient(to right, white 0%, #ddd    80%);
            box-shadow: 6rpx 6rpx 12rpx rgba(0, 0, 0, 0.5);
        }
    }
    
}

</style>
